<script lang="ts" setup>
import { provide, ref } from 'vue';

const activeName = ref('all')
const orderStatus = [
  { name: 'all', label: '全部订单' },
  { name: 'unpay', label: '待付款' },
  { name: 'deliver', label: '待发货' },
  { name: 'receive', label: '待收货' },
  { name: 'comment', label: '待评价' },
  { name: 'complete', label: '已完成' },
  { name: 'cancel', label: '已取消' }
]
const handleclick = (tab: any, index: number) => {
  if (tab.props.name === 'all') {
    // 可以按需处理对应tab的请求
    console.log('处于订单页面');
  }
  if (index === 1) {
    console.log('处于待付款页面');
  }
}
</script>

<template>
  <xtx-tabs v-model="activeName" @tab-click="handleclick">
    <XtxTabsPane v-for="item in orderStatus" :key="item.name" :name="item.name" :label="item.label">
      {{ item.label }}
    </XtxTabsPane>
  </xtx-tabs>
</template>